import React, { forwardRef, useEffect, useState } from 'react'
import { Form, Input, Select } from 'antd'
import { roleObj } from '@/utils/const'

const { Option } = Select
// 将表单数据使用ref传输到父组件
const UserForm = forwardRef((props, ref) => {
  // 为了判断区域是否能编辑
  const [idDisabled, setIsDisabled] = useState(false)
  // 从本地token获取角色类型和地区
  const { roleId, region } = JSON.parse(localStorage.getItem('token'))

  // roleId  1 超级管理员 2 区域 管理员 3 区域编辑
  // 区域是否禁用
  const checkRegionDisabled = (item) => {
    if (props.isUpdate) {
      // 如果是表单更新
      if (roleObj[roleId] === 'superadmin') {
        // 如果是超级管理员，直接不禁用
        return false
      } else {
        // 反之则禁用
        return true
      }
    } else {
      // 增加表单
      if (roleObj[roleId] === 'superadmin') {
        // 如果是超级管理员，直接不禁用
        return false
      } else {
        // 只能选择自己当前管理的区域
        return region !== item
      }
    }
  }

  // 选择角色类型是否禁用
  const checkRoleDisabled = (item) => {
    if (props.isUpdate) {
      // 如果是表单更新
      if (roleObj[roleId] === 'superadmin') {
        // 如果是超级管理员，直接不禁用
        return false
      } else {
        // 反之则禁用
        return true
      }
    } else {
      // 增加表单
      if (roleObj[roleId] === 'superadmin') {
        // 如果是超级管理员，直接不禁用
        return false
      } else {
        // 只能选择自区域编辑
        return roleObj[item.id] !== 'editor'
      }
    }
  }

  // 获取传来的参数设置
  useEffect(() => {
    setIsDisabled(props.isUpdateDisable)
  }, [props.isUpdateDisable, roleId, region])

  return (
    <Form layout="vertical" ref={ref}>
      <Form.Item
        label="用户名"
        name="username"
        rules={[{
          required: true,
          message: '请输入用户名'
        }]}>
        <Input/>
      </Form.Item>

      <Form.Item label="密码" name="password"
        rrules={[{
          required: true,
          message: '请输入密码'
        }]}>
        <Input type="password"/>
      </Form.Item>

      {/*通过禁用状态设置是否可选中*/}
      <Form.Item label={'区域'} name="region"
        rules={idDisabled ? [] : [{
          required: true,
          message: '请选择区域'
        }]}>
        <Select disabled={idDisabled} style={{ width: 120 }}>
          {
            props.regionList.map((item) => {
              return <Option
                disabled={checkRegionDisabled(item.value)}
                key={item.id}
                value={item.value}>
                {item.tittle}
              </Option>
            })
          }
        </Select>
      </Form.Item>

      <Form.Item label={'角色'} name="roleId"
        rules={[{
          required: true,
          message: '请选择角色'
        }]}>
        <Select onChange={(value) => {
          if (value === 1) {
            //如果是超级管理员，就不可以选择
            setIsDisabled(true)
            // 给表单设置默认值
            ref.current.setFieldsValue({
              region: ''
            })
          } else {
            // 如果不是超级管理员，就可以选择
            setIsDisabled(false)
          }
        }} style={{ width: 120 }}>
          {
            props.roleList.map((item) => {
              return <Option
                disabled={checkRoleDisabled(item)}
                key={item.id}
                value={item.id}>
                {item.roleName}
              </Option>
            })
          }
        </Select>
      </Form.Item>
    </Form>
  )
})


export default UserForm